<template>
  <div>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>

    <el-form ref="from" class="edit" label-width="80px" :model="formLabelEdit" :rules="rules" status-icon>
      <div v-if="active === 0">
        <el-col :span="24">
          <h4 class="caption">选择作品</h4>
          <p class="caption-out">如果进⾏上链审核的作品进⾏过上链，请选择对应的作品关联</p>
        </el-col>

        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-select v-model="formLabelEdit.workId" placeholder="无">
                <el-option v-for="item in install" :key="item.workId" :label="item.name" :value="item.workId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>



      <div v-if="active === 1">
        <el-row>
          <el-col :span="24">
            <h4 class="manner">作品类型</h4>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="approve">
              <el-select placeholder="请选择" v-model="formLabelEdit.type">
                <el-option label="文字" value="文字"></el-option>
                <el-option label="口述" value="口述"></el-option>
                <el-option label="戏剧" value="戏剧"></el-option>
                <el-option label="摄影" value="摄影"></el-option>
                <el-option label="曲艺" value="曲艺"></el-option>
                <el-option label="舞蹈" value="舞蹈"></el-option>
                <el-option label="杂技" value="杂技"></el-option>
                <el-option label="视听" value="视听"></el-option>
                <el-option label="地图，示意图" value="地图，示意图"></el-option>
                <el-option label="工程设计图，产品设计图" value="工程设计图。产品设计图"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-col :span="24">
          <h4 class="manner">创作性质</h4>
        </el-col>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="agree" >
              <el-select v-model="formLabelEdit.quality" placeholder="请选择">
                <el-option label="原创" value="原创"></el-option>
                <el-option label="改编" value="改编"></el-option>
                <el-option label="翻译" value="翻译"></el-option>
                <el-option label="汇编" value="汇编"></el-option>
                <el-option label="注释" value="注释"></el-option>
                <el-option label="整理" value="整理"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <h4 class="manner">完成时间</h4>
          </el-col>
          <el-form-item>
            <el-date-picker v-model="formLabelEdit.completeTime" format="yyyy-MM-dd" type="date" placeholder="请选择时间">
            </el-date-picker>
          </el-form-item>
        </el-row>

        <el-row>
        
          <h4 class="manner">完成地点</h4>
          <el-form-item>

            <el-col :span="5">
              <el-input v-model="formLabelEdit.nation" width="50px"></el-input>
            </el-col>

            <v-distpicker  :province="formLabelEdit.province" :city="formLabelEdit.city" @province="onChangeProvince" @city="onChangeCity"></v-distpicker>
          </el-form-item>
        </el-row>

      </div>


      <div v-if="active === 2">

      <el-form-item>
        <h4 class="manner">著作权人</h4>
        <!-- rightList 著作权人 -->
        <el-table :data="formLabelEdit.rightList" border style="width: 100%">
          <el-table-column prop="date" label="著作权人" width="180">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.copyright" v-show="scope.row.iseditor" />
              <span v-show="!scope.row.iseditor">{{ scope.row.copyright }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="证件类型" width="180">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.cardType" v-show="scope.row.iseditor" />
              <span v-show="!scope.row.iseditor">{{ scope.row.cardType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="证件号码">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.idCard" v-show="scope.row.iseditor" />
              <span v-show="!scope.row.iseditor">{{ scope.row.idCard }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="360">
            <template slot-scope="scope">
              <el-button type="warning" @click="edit(scope.row, scope)">编辑</el-button>
              <el-button type="danger" @click="save(scope.row)">保存</el-button>
              <el-button type="primary" @click="deleteIt">删除</el-button>
              <el-button type="primary" @click="add">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <h4 class="manner">作者</h4>
        <!-- authorList 作者 -->
        <el-table :data="formLabelEdit.authorList" border style="width: 100%">
          <el-table-column prop="writerData" label="作者" width="180">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.Writer" v-show="scope.row.ameditor" />
              <span v-show="!scope.row.ameditor">{{ scope.row.Writer }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="证件类型" width="180">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.ficheType" v-show="scope.row.ameditor" />
              <span v-show="!scope.row.ameditor">{{ scope.row.ficheType }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="证件号码">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.idFiche" v-show="scope.row.ameditor" />
              <span v-show="!scope.row.ameditor">{{ scope.row.idFiche }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="360">
            <template slot-scope="scope">
              <el-button type="warning" @click="isEdit(scope.row, scope)">编辑</el-button>
              <el-button type="danger" @click="isSave(scope.row)">保存</el-button>
              <el-button type="primary" @click="isDeleteIt">删除</el-button>
              <el-button type="primary" @click="isAdd">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-row>
        <el-col :span="24">
          <h4 class="manner">权利拥有及其说明</h4>
          <el-checkbox-group v-model="formLabelEdit.rightTypeList" class="array">
            <el-checkbox label="全部"></el-checkbox>
            <el-checkbox label="发表权"></el-checkbox>
            <el-checkbox label="署名权"></el-checkbox>
            <el-checkbox label="修改权"></el-checkbox>
            <el-checkbox label="保护作品完整权"></el-checkbox>
            <el-checkbox label="复制权"></el-checkbox>
            <el-checkbox label="发行权"></el-checkbox>
            <el-checkbox label="出租权"></el-checkbox>
            <el-checkbox label="展览权"></el-checkbox>
            <el-checkbox label="表演权"></el-checkbox>
            <el-checkbox label="放映权"></el-checkbox>
            <el-checkbox label="广播权"></el-checkbox>
            <el-checkbox label="信息网络传播权"></el-checkbox>
            <el-checkbox label="摄制权"></el-checkbox>
            <el-checkbox label="改编权"></el-checkbox>
            <el-checkbox label="翻译权"></el-checkbox>
            <el-checkbox label="汇编权"></el-checkbox>
            <el-checkbox label="其他"></el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <h4 class="manner">权利证明材料上传</h4>
          <span class="genre">⽀持⽂件类型：JPG，JPEG，PDF 最⼤体积：1MB</span>
        </el-col>
      </el-row>

      <el-row class="photo">
        <el-upload
          class="upload-demo"
          :headers="headers"
          drag
          :action="updateAction"
          :on-success="uploadPdf"
          >
          <img v-if="formLabelEdit.support" :src="formLabelEdit.support" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

      </el-row>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <el-input type="text" v-model="formLabelEdit.paytoken" placeholder="请输入密码" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="send">确 定</el-button>
        </span>
      </el-dialog>
  

      <!-- netChannel 是否有网络渠道 -->
      <!-- netUrl   作品发表地址 -->


      <!-- payway 支付方式 -->
      <!-- paytoken 支付密码 -->
      <!-- identity  -->

      <el-button type="primary" style="margin-top: 50px;margin-bottom: 100px; margin-left: 100px;" class="submit-button" @click="getDialog">提交认证</el-button>
    </div>
    
    </el-form>
    
    <div class="work">
      <el-button v-if="active==1||active==2" style="margin-top: 12px; margin-left: 100px;"  @click="back">上一步</el-button>
      <el-button v-if="active==0||active==1" style="margin-top: 12px; margin-left: 100px;" type="primary" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { provinceAndCityData } from 'element-china-area-data'
import { payAndAuth, getWorkList, detailAuth } from '@/api/work'
import VDistpicker from 'v-distpicker'

import { getToken } from '@/utils/auth'
import Config from "@/utils/config";
export default {
  //import引入的组件需要注入到对象中才能使用
  props: [],
  components: { VDistpicker },
  data() {
    //这里存放数据
    return {
      dialogVisible: false,
      updateAction:Config.updateImgAction,
      headers: {token: getToken('Token') },
      // 图片上传 
      // updateAction
      install: [],
      active: 0,
      workType: [
        {
          label: '文字',
        },
        {
          label: '口述',
        },
        {
          label: '戏剧',
        },
        {
          label: '摄影',
        },
        {
          label: '模型',
        },
        {
          label: '建筑',
        }
      ],
      options: provinceAndCityData,
      selectedOptions: [],

      checkList: [],
      active: 0,
      formLabelEdit: {
        type: '',
        quality: '',
        // approve:'',
        completeTime: '',
        nation: '中国',
        province: '',
        city: '',
        area: '',
        // 著作权人 ---------------------------
        rightList: [
          {
            copyright: "",
            cardType: "",
            idCard: "",
            iseditor: true
          },
        ],
        // 作者 -------------------------------
        authorList: [
          {
            Writer: '',
            ficheType: '',
            idFiche: '',
            ameditor: true
          }
        ],
        rightTypeList: [],
        support: '',
        content: '',

        netChannel: '', // 是否有网络渠道
        netUrl: '', // 作品发表地址
        payway: '', // 支付方式
        paytoken: '', //支付密码
        identity: '',
        payway: 1,
        paytoken: '123456'
      },
      rules: {},
      agree: {},
      value: '',
      // textareaModel:''
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //计算属性
  watch: {},
  //监控data中的数据变化
  methods: {
    uploadPdf(res,file) {
    // console.log(res,file);
    if(res.status == 200){
      this.formLabelEdit.support = res.data;
    }
  },
    onChangeProvince(e){
      console.log('static',e);
      this.formLabelEdit.province = e.value
    },
    onChangeCity(e){
      console.log('static',e);
      this.formLabelEdit.city = e.value
    },


    next() {
        if (this.active++ > 2) this.active = 0;
      },
    back() {
      if (this.active-- > 2) this.active = 0;
    },
    handleChange(value) {
      console.log(value)
      console.log('static', provinceAndCityData);
      // this.formLabelEdit.nation = provinceAndCityData;
    },
    // 著作权人 ---------------------------------
    edit(row, index) {
      row.iseditor = true;
    },
    save(row, index) {
      row.iseditor = false;
    },
    add() {
      this.tableData.push({
        copyright: "",
        cardType: "",
        idCard: "",
        iseditor: true
      })
    },
    deleteIt() {
      this.tableData.pop();
    },
    // 作者 -------------------------------------
    isEdit(row, index) {
      row.ameditor = true;
    },
    isSave(row, index) {
      row.ameditor = false;
    },
    isAdd() {
      this.tableWriter.push({
        Writer: '',
        ficheType: '',
        idFiche: '',
        ameditor: true
      })
    },
    isDeleteIt() {
      this.tableWriter.pop();
    },

    

    getDataList() {
      getWorkList({  }).then((res) => {
        this.install = res.data.workList.rows;
        // console.log('static',this.install);
      })
    },
    getDialog(){
      this.dialogVisible = true;
    },

    // 版权认证的发送按钮
    send() {

      this.formLabelEdit.identity = this.$randomdStr(10);
      // console.log(this.$randomdStr(10));
      payAndAuth(
        this.formLabelEdit
      ).then((res) => {
        console.log(res.data);
        if (res.data.status == 200) {
          this.$message.success("提交成功");
          this.$router.push('/identification');
        } else {
          this.$message.error("提交失败");
        }
      });
    }
  },
  mounted() {
    this.getDataList();

    if(this.$route.query.workId){
      detailAuth({
      workId:this.$route.query.workId
    }).then((res)=>{
      this.formLabelEdit = res.data.data;
      this.formLabelEdit.rightList = JSON.parse(res.data.data.copyright_owner);
      this.formLabelEdit.authorList = JSON.parse(res.data.data.author);
      console.log('static',res.data.data.copyright_owner);
    })
    }

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate() { }, //生命周期 - 更新之前 - data的数据发生改变会执行这个钩子
  updated() { }, //生命周期 - 更新之后 - 内存和页面都是新的
  beforeDestroy() { }, //生命周期 - 销毁之前 - 可以做一些释放内存的操作
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang = 'less'>
.photo{
  margin: 20px 20px 20px 80px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

.edit {
  .caption {
    margin-left: 80px;
    font-size: 18px;
  }

  .caption-out {
    margin-left: 80px;
    color: #959595;
  }

  .manner {
    margin-left: 80px;
    font-size: 18px;
  }
  .submit-button{
    margin-top: 50rpx;
    margin-bottom: 100rpx;
  }

  .dartCity {
    margin-left: 20px;
  }

  .textarea {
    margin-left: 80px;
  }

  .array {
    margin-left: 80px;

  }

  .genre {
    margin-left: 80px;
    font-size: 14px;
    color: #7F8192;
  }

  .inp {
    margin-left: 80px;
  }
}
</style>